page {
    --c-bg: rgb(46, 31, 71);
    background: var(--c-bg);
}
.main {
    width: 100%;
    min-height: calc(~'100vh - 500rpx');
    margin-top: 130rpx;
    padding-bottom: 100rpx;
    .box {
        background: #f7f8fb;
        background-size: 17rpx 100rpx, 116rpx 100rpx, 17rpx 100rpx;
        background-repeat: no-repeat;
        background-position: 10rpx 0rpx,26rpx 0rpx,142rpx 0rpx;
        border-radius: 60rpx 60rpx 0 0;
        padding: 36rpx 24rpx;
        box-shadow: 0 -18rpx 8rpx -18rpx rgba(0, 0, 0, .1);
        position: relative;
        z-index: 9;
        .item {
            width: 300rpx;
            background: #fff;
            margin-top: 40rpx;
            border-radius: 28rpx;
            overflow: hidden;
            box-shadow: 5rpx 5rpx 16rpx 0 rgba(0, 0, 0, 0.1);
            &:nth-child(1),
            &:nth-child(2) {
                margin-top: 0;
            }
            &:last-child {
                box-shadow: none;
                background: transparent;
                border-radius: 0;
            }
            .top {
                height: 160rpx;
                position: relative;
                text-align: center;
                line-height: 66rpx;
                overflow: hidden;
                box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3),
                    0 0 40rpx rgba(0, 0, 0, 0.1) inset;
                .en {
                    margin-top: 12rpx;
                }
                .mask {
                    width: 100%;
                    height: 50rpx;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }
            .bottom {
                padding: 20rpx 0;
                background: #fff;
                .ani-btn {
                    width: 56%;
                    font-size: 26rpx;
                    line-height: 2;
                }
            }
        }
    }
}
// 小狗动画
.paw,
.tail {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    .paw_left,
    .paw_right {
        position: absolute;
        z-index: 5;
        width: 30rpx;
        height: 20rpx;
        border-top-left-radius: 100%;
        border-top-right-radius: 100%;
        background: #b8a392;
    }
}
.paw {
    width: 130rpx;
    z-index: 10;
    .paw_left {
        left: 0;
        top: -10rpx;
    }
    .paw_right {
        right: 0rpx;
        top: -10rpx;
    }
    .paw_left__part,
    .paw_right__part {
        width: 10rpx;
        height: 10rpx;
        background: #b8a392;
        border-radius: 10rpx;
        position: absolute;
        bottom: -4rpx;
    }
    .paw_left__part:nth-of-type(1),
    .paw_right__part:nth-of-type(1) {
        left: 0rpx;
    }
    .paw_left__part:nth-of-type(2),
    .paw_right__part:nth-of-type(2) {
        left: 10rpx;
    }
    .paw_left__part:nth-of-type(3),
    .paw_right__part:nth-of-type(3) {
        left: 20rpx;
    }
}
.puppy {
    width: 130rpx;
    height: 0rpx;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 135rpx;
    z-index: 8;
    .head_eyebrow__left,
    .head_eyebrow__right {
        background: #563930;
        width: 16rpx;
        height: 3rpx;
        position: absolute;
        z-index: 5;
        bottom: 60rpx;
    }
    .head_eye__left .pupil,
    .head_eye__right .pupil {
        width: 8rpx;
        height: 12rpx;
        background: black;
        border-radius: 100%;
        &:after,
        &:after {
            content: '';
            background: white;
            width: 4rpx;
            height: 4rpx;
            left: 2rpx;
            top: 1rpx;
            border-radius: 10rpx;
            display: block;
            position: absolute;
        }
    }
    .head_eye__left,
    .head_eye__right {
        background: white;
        position: absolute;
        z-index: 4;
        width: 16rpx;
        height: 20rpx;
        border-radius: 100%;
    }
    .head_earfold__left,
    .head_earfold__right {
        position: absolute;
        background: #563930;
        width: 24rpx;
        height: 38rpx;
        border-radius: 100%;
        z-index: 10;
        bottom: 60rpx;
    }
    .head_ear__left,
    .head_ear__right {
        position: absolute;
        background: #563930;
        width: 20rpx;
        height: 28rpx;
        border-radius: 100%;
        z-index: 10;
        bottom: 60rpx;
    }
    .head_eye__left .iris,
    .head_eye__right .iris {
        position: relative;
        background: #a3ebe8;
        width: 13rpx;
        height: 16rpx;
        border-radius: 100%;
    }
    .head_mouth__top,
    .head_mouth__left,
    .head_mouth__right {
        background: #f8f5f4;
        position: absolute;
        z-index: 3;
    }
    .head_bottom__left,
    .head_bottom__right {
        background: #cdb7a5;
        position: absolute;
        z-index: 3;
        width: 33rpx;
        height: 40rpx;
        border-radius: 100%;
    }
    .intro {
        top: -179rpx;
        position: absolute;
        text-align: center;
        font-size: 20rpx;
        color: #a25a4b;
    }
    .wrap {
        position: relative;
        animation: body 10s infinite;
    }
    .body {
        position: absolute;
        z-index: 1;
        width: 100rpx;
        height: 100rpx;
        left: 13rpx;
        top: -46rpx;
        border-radius: 100%;
        background: #cdb7a5;
    }
    .tail {
        transform-origin: 5rpx 100rpx;
        width: 10rpx;
        height: 60rpx;
        top: -40rpx;
        background: #563930;
        border-radius: 50rpx;
        animation: tail 1s infinite;
    }
    .head {
        position: absolute;
        top: 35rpx;
        left: 5rpx;
        animation: head 1s infinite;
    }
    .head_eyebrow__left {
        bottom: 124rpx;
        left: 30rpx;
        transform: rotateZ(-14deg);
        animation: eyebrow 10s infinite;
    }
    .head_eyebrow__right {
        bottom: 124rpx;
        left: 74rpx;
        transform: rotateZ(14deg);
        animation: eyebrow2 10s infinite;
    }
    .head_earfold {
        position: relative;
        top: -6rpx;
    }
    .head_earfold__right {
        bottom: 120rpx;
        left: 79rpx;
        transform: rotateZ(-30deg);
    }
    .head_earfold__left {
        bottom: 120rpx;
        left: 18rpx;
        transform: rotateZ(30deg);
    }
    .head_ear {
        position: relative;
        top: -6rpx;
    }
    .head_ear__left {
        bottom: 130rpx;
        transform: rotateZ(-50deg);
        left: 30rpx;
    }
    .head_ear__right {
        bottom: 130rpx;
        transform: rotateZ(50deg);
        left: 70rpx;
    }
    .head_top {
        background: #cdb7a5;
        width: 70rpx;
        height: 70rpx;
        position: absolute;
        z-index: 3;
        left: 25rpx;
        bottom: 80rpx;
        border-radius: 80rpx;
    }
    .head_bottom__right {
        left: 67rpx;
        bottom: 70rpx;
    }
    .head_bottom__left {
        left: 20rpx;
        bottom: 70rpx;
    }
    .head_eye__left {
        left: 32rpx;
        bottom: 100rpx;
    }
    .head_eye__left .iris {
        top: 2rpx;
        left: 2rpx;
    }
    .head_eye__left .pupil {
        position: relative;
        left: 4rpx;
        bottom: 12rpx;
        animation: eye 10s infinite;
    }
    .head_eye__right {
        left: 72rpx;
        bottom: 100rpx;
    }
    .head_eye__right .iris {
        top: 2rpx;
        left: 2rpx;
    }
    .head_eye__right .pupil {
        position: relative;
        left: 4rpx;
        bottom: 12rpx;
        animation: eye 10s infinite;
    }
    .head_tongue {
        position: absolute;
        background: pink;
        width: 14rpx;
        height: 30rpx;
        border-radius: 40rpx;
        z-index: 3;
        bottom: 50rpx;
        left: 54rpx;
        animation: tongue 1s infinite;
    }
    .head_nose {
        background: #563930;
        width: 16rpx;
        height: 10rpx;
        border-radius: 20rpx;
        position: absolute;
        z-index: 5;
        left: 52rpx;
        bottom: 83rpx;
    }
    .head_nose:after {
        content: '';
        display: block;
        background: rgba(255, 255, 255, 0.3);
        position: absolute;
        border-radius: 10rpx;
        width: 4rpx;
        left: 3rpx;
        bottom: 4rpx;
        height: 4rpx;
    }
    .head_mouth__top {
        width: 30rpx;
        height: 30rpx;
        border-radius: 100%;
        left: 45rpx;
        bottom: 73rpx;
    }
    .head_mouth__left {
        width: 33rpx;
        height: 25rpx;
        border-radius: 100%;
        left: 33rpx;
        bottom: 65rpx;
    }
    .head_mouth__left:after {
        width: 30rpx;
        height: 20rpx;
        background: #f8f5f4;
        content: '';
        position: absolute;
        z-index: 5;
        border-radius: 5rpx;
        left: 3rpx;
        bottom: 11rpx;
        display: block;
        transform: rotatez(-43deg);
    }
    .head_mouth__right {
        width: 33rpx;
        height: 25rpx;
        border-radius: 100%;
        left: 56rpx;
        bottom: 65rpx;
    }
    .head_mouth__right:after {
        width: 30rpx;
        height: 20rpx;
        background: #f8f5f4;
        content: '';
        position: absolute;
        z-index: 5;
        border-radius: 5rpx;
        left: -1rpx;
        bottom: 11rpx;
        display: block;
        transform: rotatez(42deg);
    }
    @keyframes tail {
        0% {
            transform: translateY(-50%) rotateZ(-45deg);
        }
        50% {
            transform: translateY(-50%) rotateZ(45deg);
        }
        100% {
            transform: translateY(-50%) rotateZ(-45deg);
        }
    }
    @keyframes head {
        0% {
            top: 35rpx;
        }
        50% {
            top: 40rpx;
        }
        100% {
            top: 35rpx;
        }
    }
    @keyframes tongue {
        0% {
            bottom: 50rpx;
        }
        50% {
            bottom: 46rpx;
        }
        100% {
            bottom: 50rpx;
        }
    }
    @keyframes eyebrow {
        0% {
            transform: rotateZ(-3deg) translateY(4rpx);
        }
        30% {
            transform: rotateZ(-3deg) translateY(4rpx);
        }
        35% {
            transform: rotateZ(-17deg) translateY(-2rpx);
        }
        100% {
            transform: rotateZ(-17deg) translateY(-2rpx);
        }
    }
    @keyframes eyebrow2 {
        0% {
            transform: rotateZ(3deg) translateY(4rpx);
        }
        30% {
            transform: rotateZ(3deg) translateY(4rpx);
        }
        35% {
            transform: rotateZ(17deg) translateY(-2rpx);
        }
        100% {
            transform: rotateZ(17deg) translateY(-2rpx);
        }
    }
    @keyframes body {
        0% {
            top: 170rpx;
        }
        10% {
            top: 60rpx;
        }
        40% {
            top: 60rpx;
        }
        41% {
            top: 60rpx;
        }
        51% {
            top: 0rpx;
        }
        90% {
            top: 0rpx;
        }
        100% {
            top: 170rpx;
        }
    }
    @keyframes eye {
        0% {
            left: 4rpx;
            bottom: 12rpx;
        }
        10% {
            left: 4rpx;
            bottom: 12rpx;
        }
        15% {
            left: 0rpx;
            bottom: 12rpx;
        }
        20% {
            left: 8rpx;
            bottom: 12rpx;
        }
        25% {
            left: 4rpx;
            bottom: 12rpx;
        }
    }
}
// 背景灯动画
.stage {
    --c-bg: rgb(46, 31, 71);
    align-items: center;
    background-color: var(--c-bg);
    display: flex;
    width: 100vw;
    height: 500rpx;
    justify-content: center;
    overflow-y: hidden;
    .scene {
        width: 400rpx;
        height: 500rpx;
        position: relative;
        .halo {
            --c-1: rgb(57, 42, 96);
            --c-2: rgb(72, 52, 116);
            --c-3: rgb(155, 65, 122);
            --c-4: rgb(243, 89, 125);
            --s-core: 100rpx;
            --s-1: 120rpx;
            --s-2: 90rpx;
            --s-3: 60rpx;
            --s-4: 30rpx;
            .halo-circul {
                --c: var(--c-1);
                --s: var(--s-1);
                animation: 4s halo-anim 0.4s ease-in-out infinite;
                background-color: var(--c);
                box-shadow: 0 0 0 var(--s) var(--c);
                border-radius: 50%;
                display: block;
                left: calc(~'50% - (var(--s-core) / 2)');
                height: var(--s-core);
                position: absolute;
                top: 50%;
                transform-origin: center center;
                width: var(--s-core);
                &:nth-of-type(2) {
                    animation-delay: 0.3s;
                    --c: var(--c-2);
                    --s: var(--s-2);
                }
                &:nth-of-type(3) {
                    animation-delay: 0.2s;
                    --c: var(--c-3);
                    --s: var(--s-3);
                }
                &:nth-of-type(4) {
                    animation-delay: 0.1s;
                    --c: var(--c-4);
                    --s: var(--s-4);
                }
            }
            .halo-star {
                --size: calc(~'var(--s-core) + (var(--s-1) * 2) - 15rpx');
                animation: halo-star-anim linear 5s forwards infinite;
                background: radial-gradient(
                        circle at center,
                        var(--c-1) 69.5%,
                        transparent 69.5%
                    ),
                    linear-gradient(
                        to right,
                        transparent 50%,
                        var(--c-3) 50%,
                        var(--c-3) 52%,
                        rgba(255, 255, 255, 0.1) 52%,
                        transparent 70%
                    );
                border-radius: 50%;
                clip: rect(0 var(--size) calc(~'var(--size) / 2') 0);
                display: block;
                height: var(--size);
                left: calc(~'50% - (var(--size) / 2)');
                position: absolute;
                transform-origin: center center;
                top: calc(~'50% - var(--s-1) + 8rpx');
                width: var(--size);
                &:nth-child(2) {
                    animation-delay: calc(~'5s / 3');
                }
                &:nth-child(3) {
                    animation-delay: calc(~'(5s / 3) * 2');
                }
            }
        }
        &::before {
            --c-bg: rgb(50, 34, 78);
            --c-glow: rgb(46, 31, 71);
            --size: 500rpx;
            animation: scene-anim 0.6s infinite steps(6);
            background: var(--c-bg);
            border-radius: var(--size);
            box-shadow: inset 0 0 0 3rpx var(--c-glow);
            content: '';
            height: var(--size);
            left: calc(~'50% - (var(--size) / 2)');
            position: absolute;
            top: -3rpx;
            width: var(--size);
        }
        .lantern {
            --c-lantern-body: rgb(46, 32, 70);
            --c-lantern-light: rgb(254, 177, 129);
            --c-lantern-glow: rgb(239, 82, 127);
            display: flex;
            flex-direction: column;
            left: calc(50%);
            position: absolute;
            transform: translateX(-50%);
            z-index: 1;
            .lantern-handle {
                border: 6rpx solid rgb(57, 41, 97);
                border-radius: 50rpx;
                height: 105rpx;
                width: 200rpx;
            }
            .lantern-inner {
                animation: lantern-anim 1.2s ease-in-out alternate infinite;
                margin-top: -5rpx;
                transform-origin: top center;
                .lantern-head::before,
                .lantern-head::after {
                    background: var(--c-lantern-body);
                    border-radius: 5rpx;
                    content: '';
                    display: block;
                    height: 15rpx;
                }
                .lantern-head::before {
                    margin: 0 auto;
                    width: 100rpx;
                }
                .lantern-head::after {
                    border-radius: 3rpx;
                    height: 30rpx;
                    margin: 3rpx auto;
                    width: 60rpx;
                }
                .lantern-chain {
                    height: 60rpx;
                    &::before {
                        --c: hsl(260, 38%, 34%);
                        background-color: var(--c);
                        box-shadow: 0 0 0 5rpx var(--c), 0 20rpx 0 var(--c),
                            0 35rpx 0 var(--c), 0 50rpx 0 var(--c);
                        border-radius: 50%;
                        content: '';
                        display: block;
                        height: 10rpx;
                        margin: 0 auto;
                        width: 10rpx;
                    }
                }
                .lantern-body {
                    perspective: 350rpx;
                    position: relative;
                    &::before {
                        background-color: var(--c-lantern-light);
                        border: 8rpx solid var(--c-lantern-body);
                        border-radius: 50rpx;
                        box-shadow: inset 0 0 0 5rpx var(--c-lantern-light),
                            inset 0 0 0 20rpx var(--c-lantern-glow);
                        content: '';
                        display: block;
                        height: 195rpx;
                        margin: 0 auto;
                        perspective: 100rpx;
                        transform: rotateX(20deg) translateY(-20rpx);
                        transform-origin: center center;
                        width: 120rpx;
                    }
                    &::after {
                        --c: hsl(321, 41%, 42%);
                        background-color: var(--c);
                        border-radius: 4rpx;
                        box-shadow: -5rpx 161rpx 0 1rpx var(--c),
                            5rpx 161rpx 0 1rpx var(--c);
                        content: '';
                        display: block;
                        height: 7rpx;
                        margin: -7rpx auto 0;
                        transform: translateY(-195rpx);
                        width: 40rpx;
                    }
                    .lantern-flame {
                        background-color: #fff;
                        border-radius: 50%;
                        width: 30rpx;
                        height: 30rpx;
                        position: absolute;
                        left: calc(~'50% - 15rpx');
                        top: calc(~'45% - 20rpx');
                    }
                }
                .lantern-base {
                    background: var(--c-lantern-body);
                    border-radius: 5rpx;
                    display: block;
                    height: 15rpx;
                    margin: -15rpx auto 0;
                    width: 70rpx;
                }
            }
        }
        .planets {
            .planet {
                --bg: hsl(257, 39%, 27%);
                --light: hsl(348, 88%, 65%);
                --orbit: 150rpx;
                animation: planet-anim 5s forwards infinite;
                background: var(--bg);
                border: 2rpx solid var(--bg);
                border-radius: 50%;
                box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.25);
                height: 30rpx;
                left: calc(~'50% - 15rpx');
                overflow: hidden;
                position: absolute;
                top: 50%;
                transform-origin: center center;
                width: 30rpx;
                &::before {
                    animation: planet-light-anim 2.5s forwards linear infinite;
                    background-color: var(--light);
                    border-radius: 50%;
                    content: '';
                    position: absolute;
                    top: -20rpx;
                    right: -20rpx;
                    bottom: -20rpx;
                    left: -20rpx;
                }
                &:nth-child(1) {
                    --orbit: 70rpx;
                    animation-delay: -0.3s;
                    transform: scale(0.9) translateY(-80rpx);
                }
                &:nth-child(2) {
                    --bg: hsl(344, 83%, 63%);
                    --light: hsl(19, 98%, 75%);
                    --orbit: 100rpx;
                    animation-delay: -2s;
                    animation-duration: 5.5s;
                    transform: scale(0.8) translateY(-20rpx);
                }
                &:nth-child(3) {
                    --bg: hsl(344, 83%, 63%);
                    --light: hsl(19, 98%, 75%);
                    --orbit: 100rpx;
                    animation-delay: -4s;
                    animation-duration: 4.5s;
                    transform: scale(0.4) translateY(100rpx);
                }
                &:nth-child(4) {
                    --bg: hsl(322, 41%, 43%);
                    --light: hsl(348, 88%, 65%);
                    --orbit: 120rpx;
                    animation-delay: -3.7s;
                    animation-duration: 4.2s;
                    transform: scale(0.8) translateY(75rpx);
                }
                &:nth-child(5) {
                    --bg: hsl(322, 41%, 43%);
                    --light: hsl(348, 88%, 65%);
                    --orbit: 100rpx;
                    animation-delay: -1.3s;
                    animation-duration: 5.8s;
                    transform: scale(0.4) translateY(40rpx);
                }
                &:nth-child(6) {
                    --orbit: 90rpx;
                    animation-delay: 0.5s;
                    animation-duration: 4.2s;
                    transform: scale(0.9) translateY(150rpx);
                }
            }
        }
    }
}

@keyframes scene-anim {
    0% {
        box-shadow: inset 0 0 0 3rpx var(--c-glow);
    }
    20% {
        box-shadow: inset 0 0 0 8rpx var(--c-glow);
    }
    40% {
        box-shadow: inset 0 0 0 2rpx var(--c-glow);
    }
    60% {
        box-shadow: inset 0 0 0 6rpx var(--c-glow);
    }
    80% {
        box-shadow: inset 0 0 0 3rpx var(--c-glow);
    }
    100% {
        box-shadow: inset 0 0 0 5rpx var(--c-glow);
    }
}

@keyframes halo-anim {
    50% {
        transform: scale(1.05);
    }
}
@keyframes halo-star-anim {
    100% {
        transform: rotateZ(-360deg);
    }
}
@keyframes lantern-anim {
    0% {
        transform: rotateZ(1deg);
    }
    100% {
        transform: rotateZ(-1deg);
    }
}
@keyframes lantern-spark-anim {
    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes planet-anim {
    0% {
        margin-left: calc(~'var(--orbit) * -1');
        z-index: 1;
    }
    50% {
        margin-left: var(--orbit);
        z-index: 1;
    }
    50.1% {
        margin-left: var(--orbit);
        z-index: 0;
    }
    100% {
        margin-left: calc(~'var(--orbit) * -1');
        z-index: 0;
    }
}
@keyframes planet-light-anim {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
